import {
  Button,
  Form,
  ImageUploader,
  ImageUploadItem,
  Input,
  Space,
  Toast,
} from "antd-mobile";
import React, { FC, useState } from "react";
import { useNavigate } from "react-router-dom";
import { put } from "../../utils/request";
import { demoSrc, mockUpload } from "../home/utils";

function modifyUser() {
  const navigate = useNavigate();
  const LimitCount: FC = () => {
    const maxCount = 1;
    const [fileList, setFileList] = useState<ImageUploadItem[]>([
      {
        url: demoSrc,
      },
    ]);

    return (
      <ImageUploader
        value={fileList}
        onChange={setFileList}
        upload={mockUpload}
        multiple
        maxCount={3}
        showUpload={fileList.length < maxCount}
        onCountExceed={(exceed) => {
          Toast.show(`最多选择 ${maxCount} 张图片，你多选了 ${exceed} 张`);
        }}
      />
    );
  };
  return (
    <div>
      <p
        onClick={() => {
          navigate(-1);
        }}
        style={{ cursor: "pointer" }}
      >
        &lt;&lt;返回
      </p>
      modify-user
      <div style={{ padding: "16px", fontSize: "15px", color: "#697b8c" }}>
        三种必选填方式
      </div>
      <Form
        requiredMarkStyle="asterisk"
        onFinish={(v) => {
          console.log(v);
          put("/members/update_info", {
            nickName: v.anotherName,
            avatar:
              "https://img2.baidu.com/it/u=1793746633,1083714856&fm=253&fmt=auto&app=138&f=GIF?w=449&h=461",
            mobile: v.tel,
            address: v.address,
          }).then((res) => {});
        }}
      >
        <Form.Header>修改个人信息</Form.Header>

        <Form.Item
          name="address"
          label="地址"
          help="详情地址"
          // rules={[{ required: true }]}
        >
          <Input placeholder="请输入地址" />
        </Form.Item>
        <Form.Item
          name="tel"
          label="电话"
          help="详情电话"
          // rules={[{ required: true }]}
        >
          <Input placeholder="请输入电话" />
        </Form.Item>
        <Form.Item name="anotherName" label="艺名">
          <Input placeholder="请输入艺名" />
        </Form.Item>
        <Space direction="vertical">
          <LimitCount />
        </Space>
        <Button
          type="submit"
          style={{ width: "80vw", display: "block", margin: "20px auto" }}
          color="primary"
        >
          提交
        </Button>
      </Form>
    </div>
  );
}

export default modifyUser;
